<template>
    <div class="cate">
         <el-row>
        <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        </el-col>
     </el-row>
     <el-button type="success" plain >添加用户</el-button>
    <tree-grid
      :treeStructure="true"
      :columns="columns"
      :data-source="dataSource"
      @deleteCate="deleteCategory"
      @editCate="editCategory">
    </tree-grid>
    <div class="page">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="1"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    </div>
</template>
<script>
import TreeGrid from '@/components/TreeGrid/TreeGrid'
import {getcate} from '@/api/index'
export default {
    data(){
        return{
    dataSource: [],
    total:0,
    pagenum:1,
    pagesize:10,
    columns: [{
      text: '分类名称',
      dataIndex: 'cat_name',
      width: ''
    }, {
      text: '是否有效',
      dataIndex: 'cat_deleted',
      width: ''
    }, {
      text: '排序',
      dataIndex: 'cat_level',
      width: ''
    }]
        }
    },
    created () {
        this.list()
    },
    components:{
        TreeGrid
    },
    methods: {
        //初始化
        list(){
            getcate({type:"3",pagesize:this.pagesize,pagenum:this.pagenum}).then(res=>{
                console.log(res,6666);
                if(res.meta.status ===200){
                    this.total = res.data.total
                    
                    this.dataSource = res.data.result
                }
            })
        },

        deleteCategory (cid) {
        console.log(cid)
             },
        editCategory (cid) {
        console.log(cid)
          },
         handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize = val;
        this.list()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagenum = val;
        this.list()
      },
    }
}
</script>
<style lang="scss" scoped>
.cate{
 .page {
    padding: 5px 0;
    background-color: #D3DCE6;
  }
}
</style>
